<template>
	<div style="max-width: 1200px;margin: 0 auto;">
		<div style="margin: 10px 0;padding-bottom: 50px;width: 100%;">
			<el-row :gutter="10">
				<el-col :lg="6" :md="12" :sm="12" :xm="24" v-for="e in listData" :key="e.id"
					style="margin-bottom: 10px;">
					<div style="border: 1px solid #ccc; padding-bottom: 10px">
						<img :src="e.img" alt="" style="width: 100%;height: 150px">
						<div style="padding: 5px;font-size: 16px;font-weight: bold;">名称：{{ e.name }}</div>
						<div style="padding: 5px">开始时间：{{ e.startTime }}</div>
						<div style="padding: 5px">结束时间：{{ e.endTime }}</div>
						<div style="padding: 5px">发布者：{{ e.userName }}</div>
						<div style="padding: 5px;display: flex;flex-direction: row;justify-content: center;">
							<el-button type="primary" @click="add(e.id)" v-if="e.isApplication == '未报名'">报名考试
							</el-button>
							<el-button type="info" v-if="e.isApplication == '已报名'" disabled>已报名</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-dialog title="报名" :visible.sync="dialogTableVisible" width="20%">
				<el-form :model="formData" :rules="rules" ref="formDataRef" label-width="100px" class="demo-ruleForm">
					<el-form-item :label="formKeyName[item]" :prop="item" v-for="(item, index) in Object.keys(formData)"
						v-if="item != 'gender'">
						<el-input v-model="formData[item]" v-if="item != 'mobile'"></el-input>
						<el-input v-model="formData[item]" v-if="item == 'mobile'" disabled></el-input>
					</el-form-item>
					<el-form-item :label="formKeyName[item]" :prop="item" v-for="(item, index) in Object.keys(formData)"
						v-if="item == 'gender'">
						<el-select v-model="formData[item]" placeholder="请选择性别">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						
						<el-button type="primary" @click="submitForm('formDataRef')">保存</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<div style="margin-top: 20px">
				<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
					:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
				</el-pagination>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				//总条数
				total: 0,
				listData: [],
				chooseId: '',
				formData: {

				},
				formKeyName: {

				},
				infoList: [],
				rules: {

				},
				dialogTableVisible: false,
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10,
					status: 1
				},
			}
		},
		created() {
			this.getPageList()
			// this.initializeRuleForm()
			
		},
		methods: {
			// initializeRuleForm() {
			// 	// 根据infoList的长度来初始化ruleForm数组  
			// 	this.formData.ruleForm = this.infoList.map(() => ({
			// 		value: ''
			// 	}));
			// },
			validate(error) {
				console.log(error, '错误');
			},
			//格式化校验数据
			GSHData(arr) {
				if (arr.length == 0) {
					return {}
				}
				let result = {}
				arr.forEach(item => {
					let str = ''
					// item.necessary = true
					if (item.keyword == 'gender') {
						console.log('是性别')
						if (item.necessary === true) {
							str = `${item.name}为必选项`
						}
						result[item.keyword] = [{
							required: item.necessary,
							message: str,
							trigger: 'change'
						}]
					} else if (item.keyword != 'gender') {
						if (item.necessary === true) {
							str = `${item.name}为必填项`
						}
						result[item.keyword] = [{
							required: item.necessary,
							message: str,
							trigger: 'blur'
						}]
					}
				})
				return result
			},
			//获取分页数据
			getPageList() {
				this.listData = []
				this.$axios.get("/application/page", {
					params: this.pageInfo
				}).then(res => {
					// console.log('报1名', res)

					// this.listData = res.data.data
					// this.total = res.data.total
					res.data.data.forEach((item) => {
						let nowTime = parseInt(new Date().getTime())
						let startTime = parseInt(new Date(item.startTime).getTime())
						let endTime = parseInt(new Date(item.endTime).getTime())
						if (startTime < nowTime && nowTime < endTime) {
							this.listData.push(item)
						}
						console.log(this.listData)
						this.total = this.listData.length
					})
				})
			},
			submitForm(formDataRef) {
				this.$refs[formDataRef].validate((valid) => {
					if (valid) {
						//深拷贝
						let str = JSON.stringify(this.formData)
						let arr = JSON.parse(str)
						arr.applicationId = this.chooseId
						console.log('上传', arr)
						this.$axios.post("/applicationInfo/add",arr).then(res => {
							console.log('报名', res)
							if (res.code == 200) {
								this.$message({
									showClose: true,
									type: 'success',
									message: '报名成功!'
								});
								this.dialogTableVisible = false
								this.getPageList()
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			add(id) {
				this.chooseId = id
				
				this.listData.forEach((item) => {
					if (item.id == id) {
						this.infoList = item.infoType
					}
					
				})
				this.rules = this.GSHData(this.infoList)
				let data = {}
				let keyName = {}
				this.infoList.forEach(item => {
					console.log(item);
					data[item.keyword] = item.value
					keyName[item.keyword] = item.name

				})
				this.formData = data
				this.formData.mobile = localStorage.getItem('phone')
				this.formKeyName = keyName
				this.dialogTableVisible = true
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
		}
	}
</script>
